(function(win){
	Date.prototype.only = function(){//获取唯一码
        var n = this.getTime().toString();
        n = -(-n.substr((n.length - 9),9));
        return n + Math.ceil(Math.random() * 10000);
    }
    var zIndex = (function(){
        var n = 0;
        return function(type){
            return (type || 4) * 1000000 + (n ++);
        };
    })()
    function clone(p,JSONMeth){
	    if(!p || typeof p !== "object") return p;
	    if(JSONMeth && JSON){
	        return JSON.parse(JSON.stringify(p));
	    }else{
	        var o = p.constructor === Array ? [] : {};
	        for(var key in p) o[key] = typeof p !== "object" ? p[key] : clone(p[key]);
	        return o;
	    }
    }
    //引用对象赋值
    function equal(a,b){
        if(a && b && typeof a === 'object' && typeof b === 'object'){
            for(var key in b){
                if(a[key] && b[key] && typeof a[key] === 'object' && typeof b[key] === 'object') {
                    equal(a[key],b[key]);
                }else{
                    a[key] = b[key];
                }
            }
        }else{
            throw 'typeof arguments must be object and not null';
        }
    }
    function _eval(s,o,fn,finalFn){
    	var _this = s;
        if(typeof o === 'string') return this.replace(new RegExp("{.*}","g"), o);
        for(var k in o){
            var v = o[k];
            v = v == undefined || v == null ? '' : v;
            _this = _this.replace(new RegExp("{" + k + "}","g"), v);//直接替换
            _this = _this.replace(new RegExp("{listStyle_" + k + "}","g"), typeof v === "string" ? v.charAt(0) : "?");//列表风格
            if(fn) _this = fn(_this,k,v,o);
        }
        if(finalFn) _this = finalFn(_this,o);
        return _this;
    }
	function createElement(tagName,args){
		args = args || {};
		var o = document.createElement(tagName);
		for(var key in args) if(key != 'style') o[key] = args[key];
		if(args.style) for(var key in args.style) o.style[key] = args.style[key];
		if(args.attr) for(key in args.attr) o.setAttribute(key,args.attr[key]);
		return o;
	}
	var id = 0;
	var componentConfig = '',fromData = {title:'',description:'',data:{},id:id,btns:[{type:1,url:'posturl',name:'提交'},{type:2,url:'agreeurl',name:'通过'},{type:3,url:'refuseurl',name:'拒绝'}],components:[]},status = {readonly:false,edit:true};
	var Verify = '',verifyMethods = '';
	var active = {element:'',btns:'',edit:''},styleElement = '',saveFn = '',dom = '',styles = {},htmls = {};
	var animateOptions = '<optgroup label="Attention Seekers">\
	  <option value="bounce">bounce</option>\
	  <option value="flash">flash</option>\
	  <option value="pulse">pulse</option>\
	  <option value="rubberBand">rubberBand</option>\
	  <option value="shake">shake</option>\
	  <option value="swing">swing</option>\
	  <option value="tada">tada</option>\
	  <option value="wobble">wobble</option>\
	</optgroup>\
	<optgroup label="Bouncing Entrances">\
	  <option value="bounceIn">bounceIn</option>\
	  <option value="bounceInDown">bounceInDown</option>\
	  <option value="bounceInLeft">bounceInLeft</option>\
	  <option value="bounceInRight">bounceInRight</option>\
	  <option value="bounceInUp">bounceInUp</option>\
	</optgroup>\
	<optgroup label="Bouncing Exits">\
	  <option value="bounceOut">bounceOut</option>\
	  <option value="bounceOutDown">bounceOutDown</option>\
	  <option value="bounceOutLeft">bounceOutLeft</option>\
	  <option value="bounceOutRight">bounceOutRight</option>\
	  <option value="bounceOutUp">bounceOutUp</option>\
	</optgroup>\
	<optgroup label="Fading Entrances">\
	  <option value="fadeIn">fadeIn</option>\
	  <option value="fadeInDown">fadeInDown</option>\
	  <option value="fadeInDownBig">fadeInDownBig</option>\
	  <option value="fadeInLeft">fadeInLeft</option>\
	  <option value="fadeInLeftBig">fadeInLeftBig</option>\
	  <option value="fadeInRight">fadeInRight</option>\
	  <option value="fadeInRightBig">fadeInRightBig</option>\
	  <option value="fadeInUp">fadeInUp</option>\
	  <option value="fadeInUpBig">fadeInUpBig</option>\
	</optgroup>\
	<optgroup label="Fading Exits">\
	  <option value="fadeOut">fadeOut</option>\
	  <option value="fadeOutDown">fadeOutDown</option>\
	  <option value="fadeOutDownBig">fadeOutDownBig</option>\
	  <option value="fadeOutLeft">fadeOutLeft</option>\
	  <option value="fadeOutLeftBig">fadeOutLeftBig</option>\
	  <option value="fadeOutRight">fadeOutRight</option>\
	  <option value="fadeOutRightBig">fadeOutRightBig</option>\
	  <option value="fadeOutUp">fadeOutUp</option>\
	  <option value="fadeOutUpBig">fadeOutUpBig</option>\
	</optgroup>\
	<optgroup label="Flippers">\
	  <option value="flip">flip</option>\
	  <option value="flipInX">flipInX</option>\
	  <option value="flipInY">flipInY</option>\
	  <option value="flipOutX">flipOutX</option>\
	  <option value="flipOutY">flipOutY</option>\
	</optgroup>\
	<optgroup label="Lightspeed">\
	  <option value="lightSpeedIn">lightSpeedIn</option>\
	  <option value="lightSpeedOut">lightSpeedOut</option>\
	</optgroup>\
	<optgroup label="Rotating Entrances">\
	  <option value="rotateIn">rotateIn</option>\
	  <option value="rotateInDownLeft">rotateInDownLeft</option>\
	  <option value="rotateInDownRight">rotateInDownRight</option>\
	  <option value="rotateInUpLeft">rotateInUpLeft</option>\
	  <option value="rotateInUpRight">rotateInUpRight</option>\
	</optgroup>\
	<optgroup label="Rotating Exits">\
	  <option value="rotateOut">rotateOut</option>\
	  <option value="rotateOutDownLeft">rotateOutDownLeft</option>\
	  <option value="rotateOutDownRight">rotateOutDownRight</option>\
	  <option value="rotateOutUpLeft">rotateOutUpLeft</option>\
	  <option value="rotateOutUpRight">rotateOutUpRight</option>\
	</optgroup>\
	<optgroup label="Specials">\
	  <option value="hinge">hinge</option>\
	  <option value="rollIn">rollIn</option>\
	  <option value="rollOut">rollOut</option>\
	</optgroup>\
	<optgroup label="Zoom Entrances">\
	  <option value="zoomIn">zoomIn</option>\
	  <option value="zoomInDown">zoomInDown</option>\
	  <option value="zoomInLeft">zoomInLeft</option>\
	  <option value="zoomInRight">zoomInRight</option>\
	  <option value="zoomInUp">zoomInUp</option>\
	</optgroup>\
	<optgroup label="Zoom Exits">\
	  <option value="zoomOut">zoomOut</option>\
	  <option value="zoomOutDown">zoomOutDown</option>\
	  <option value="zoomOutLeft">zoomOutLeft</option>\
	  <option value="zoomOutRight">zoomOutRight</option>\
	  <option value="zoomOutUp">zoomOutUp</option>\
	</optgroup>'
	function editCss(){
		var _styles = {
			position:'fixed',
			zIndex:zIndex(),
			bottom:'0px',
			right:'0px',
			background:'#fff',
			minHeight:'100px',
			width:'250px',
			boxShadow:'0 0 10px #ccc'
		}
		equal(_styles,styles);
		var background = createElement('div',{
			style:_styles
		})
		var titleDiv = createElement('div',{
			style:{
				textAlign:'right',
				height:'40px',
				background:'#f8f8f8',
				borderTop:'1px solid #e4e4e4',
				borderBottom:'1px solid #e4e4e4',
				color:'#08974e',
				lineHeight:'40px',
				padding:'0px 10px'
			}
		})
		titleDiv.appendChild(createElement('span',{
			innerHTML:'动画预览',
			style:{
				float:'left',
				fontSize:'1.2rem'
			}
		}))
		
		var contentDiv = createElement('div',{
			style:{
				maxHeight:(document.body.clientHeight / 2) + 'px',
				margin:'10px 5px'
			}
		})
		titleDiv.appendChild(createElement('span',{
			innerHTML:'关闭',
			style:{
				marginRight:'10px'
			},
			onclick:function(){
				if(background.parentNode) background.parentNode.removeChild(background);
			}
		}))
		var selector = createElement('input',{
			placeholder:'css选择器',
			style:{
				border:'1px solid #e4e4e4',
				height:'30px',
				lineHeight:'30px',
				padding:'0px 5px',
				width:'95%',
				background:'none'
			},
			value:''
		})
		contentDiv.appendChild(selector);
		var animating = false;
		var select = createElement('select',{
			innerHTML:'<option value="" selected>请选择动画</option>' + animateOptions,
			style:{
				border:'1px solid #e4e4e4',
				height:'40px',
				lineHeight:'40px',
				padding:'0px 5px',
				width:'99%',
				background:'none',
				marginTop:'10px'
			},
			onchange:function(){
				if(animating) return false;
				animating = true;
				var _selector = document.querySelector(selector.value || '*'),selectAnimate = select.value,className = _selector.className;
				_selector.className = className + ' animated ' + selectAnimate;
				if(!_selector.bindedEnd){
					_selector.addEventListener("webkitAnimationEnd",function(){
						animating = false;
						_selector.className = className;
					})
				}
			}
		})
		contentDiv.appendChild(select);
		background.appendChild(titleDiv);
		background.appendChild(contentDiv);
		dom.appendChild(background);
	}
	function selectComponent(data,e){//选择组件
		if(status.readonly) return false;
		if(componentConfig[data.type]) {
			out();
			var btns = createElement('div',{
				style:{
					color:'#000',
					position:'fixed',
					zIndex:zIndex(),
					background:'#000',
					color:'#fff',
					padding:'10px 15px',
					left: (e.clientX + 230 > document.body.clientWidth ? document.body.clientWidth - 240 : e.clientX) + 'px',
					top: e.clientY + 'px',
					width:'230px',
					display:'flex',
					lineHeight:'1'
				}
			});
			btns.appendChild(createElement('span',{
				innerHTML:'编辑',
				style:{
					flex:1,
					marginRight:'10px',
					borderRight:'1px solid #6d6d6d'
				},
				onclick:function(){
					edit(componentConfig[data.type],data.parentId,data);
				}
			}));
			btns.appendChild(createElement('span',{
				innerHTML:'删除',
				style:{
					flex:1,
					marginRight:'10px',
					borderRight:'1px solid #6d6d6d'
				},
				onclick:function(){
					remove(data);
				}
			}));
			btns.appendChild(createElement('span',{
				innerHTML:'上移',
				style:{
					flex:1,
					marginRight:'10px',
					borderRight:'1px solid #6d6d6d'
				},
				onclick:function(){
					move(data,-1);
				}
			}));
			btns.appendChild(createElement('span',{
				innerHTML:'下移',
				style:{
					flex:1,
					marginRight:'10px',
					borderRight:'1px solid #6d6d6d'
				},
				onclick:function(){
					move(data,1);
				}
			}));
			btns.appendChild(createElement('span',{
				innerHTML:'取消',
				style:{
					flex:1
				},
				onclick:function(){
					btns.style.display = 'none';
				}
			}));
			active.elementStyle = this.getAttribute('style');
			this.style.border = '1px dashed #ff0000';
			active.element = this;
			active.btns = btns;
			dom.appendChild(btns,null);
		}
	}
	function out(){
		if(active.element) active.element.setAttribute('style',active.elementStyle);
		if(active.btns && active.btns.parentNode) active.btns.parentNode.removeChild(active.btns);
		if(active.edit && active.edit.parentNode) active.edit.parentNode.removeChild(active.edit);
		if(active.select && active.select.parentNode) active.select.parentNode.removeChild(active.select);
		if(active.editFrom && active.editFrom.parentNode) active.editFrom.parentNode.removeChild(active.editFrom);
	}
	function edit(config,parentId,data){
		if(active.btns) active.btns.style.display = 'none';
		var attr = clone(config.attr);
		var rule = !data ? {} : clone(data.rule);
		rule = rule || {};
		var _data = data ? data.attr : {};
		var _styles = {
			position:'fixed',
			zIndex:zIndex(),
			bottom:'0px',
			left:'0px',
			background:'#fff',
			minHeight:'200px',
			width:'100%',
			boxShadow:'0 0 10px #ccc',
			textAlign:'left'
		}
		equal(_styles,styles);
		var background = createElement('div',{
			style:_styles
		})
		var titleDiv = createElement('div',{
			style:{
				textAlign:'right',
				height:'40px',
				background:'#f8f8f8',
				borderTop:'1px solid #e4e4e4',
				borderBottom:'1px solid #e4e4e4',
				color:'#08974e',
				lineHeight:'40px',
				padding:'0px 10px'
			}
		})
		titleDiv.appendChild(createElement('span',{
			innerHTML:(!data ? '新增' : '') + ('<span style="font-size:1.2rem;margin:5px;">' + config.name + '</span>') + '设置',
			style:{
				float:'left',
				fontSize:'0.8rem'
			}
		}))
		titleDiv.appendChild(createElement('span',{
			innerHTML:'取消',
			style:{
				marginRight:'10px'
			},
			onclick:function(){
				if(active.edit) active.edit.style.display = 'none';
			}
		}))
		titleDiv.appendChild(createElement('span',{
			innerHTML:'完成',
			onclick:function(){
				var isOk = true,err = [];
				for(var key in attr){
					var value = _data[key];
					if(attr[key].rule && typeof attr[key].rule == 'object'){
						for(var k in attr[key].rule){
							var title = attr[key].title,_rule = attr[key].rule[k];
							if(_rule != false){
								if(Verify[k] && typeof Verify[k] == 'function'){
									var v = Verify[k](value,_rule);
									if(!v[0]){
										isOk = false;
										err.push(title + v[1]);
										break;
									}
								}
							}
						}
					}
					if(typeof attr[key].verify == 'function'){
						var v = attr[key].verify.call(attr[key],value,attr);
						if(!v[0]){
							isOk = false;
							err.push(v[1]);
						}
					}
					attr[key].value = value;
				}
				if(!isOk){
					alert(err.join('\n\r'));
				}else{
					if(!data) {
						fromData.components.push({parentId:parentId,attr:_data,rule:rule,label:_data.label,type:config.type,id:new Date().only()});
					}else{
						data.rule = rule;
						data.attr = _data;
						data.label = _data.label;
					}
					build();
				}
			}
		}))
		background.appendChild(titleDiv);
		var tabDiv = createElement('div',{
			style:{
				borderBottom:'1px solid #06a052',
				margin:'15px 5px 5px 5px',
				textAlign:'left'
			}
		})
		var maxHeight = document.body.clientHeight / 2;
		var content1 = createElement('div',{
			style:{
				maxHeight:maxHeight + 'px',
				margin:'10px 5px',
				display:'none',
				overflow:'auto'
			}
		});
		var content2 = createElement('div',{
			style:{
				maxHeight:maxHeight + 'px',
				margin:'10px 5px',
				display:'none',
				overflow:'auto'
			}
		});
		var tab1 = createElement('span',{
			innerHTML:'基础属性',
			style:{
				marginLeft:'10px',
				padding:'4px 10px'
			},
			onclick:function(){
				content(0,this,tab2,content1,content2);
			}
		})
		tabDiv.appendChild(tab1);
		var tab2 = createElement('span',{
			innerHTML:'验证方式',
			style:{
				marginLeft:'10px',
				padding:'4px 10px'
			},
			onclick:function(){
				content(1,this,tab1,content2,content1);
			}
		})
		tabDiv.appendChild(tab2);
		background.appendChild(tabDiv);
		style('.div' + id,'width:46%;height:30px;line-height:30px;overflow:hidden;border:1px solid #e7e7e7;margin-left:2%;float:left;color:#adadad;margin-bottom:10px;');
		for(var key in attr){
			(function(key){
				if(!data) _data[key] = attr[key].defaultValue !== undefined ? attr[key].defaultValue : '';
				var div = createElement('div',{
					className:'div' + id
				})
				var input = '';
				if(attr[key].type === 'checkbox'){
					div.innerHTML = '<label for="check' + key + id + '" style="float:left;font-size:0.8rem;margin-left:5px;">' + attr[key].title + '</label>';
					input = createElement('input',{
						type:'checkbox',
						id:'check' + key + id,
						style:{
							float:'right',
							marginRight:'10%',
							marginTop:'8px'
						},
						onchange:function(){
							_data[key] = this.checked;
						}
					})
					input.checked = !!_data[key];
				}else if(attr[key].type === 'select'){
					var options = '';
					for(var i = 0; i < attr[key].actions.length; i ++){
						_data[key] = _data[key] == undefined && attr[key].actions[i].selected ? attr[key].actions[i].value : _data[key];
						options += '<option value="' + attr[key].actions[i].value + '"' + (attr[key].actions[i].selected ? ' selected' : '') + '>' + attr[key].actions[i].name + '</option>';
					}
					input = createElement('select',{
						innerHTML:options,
						style:{
							border:'none',
							height:'30px',
							lineHeight:'30px',
							padding:'0px 5px',
							width:'96%',
							background:'none',
							opacity:0.5
						},
						onchange:function(){
							_data[key] = this.value;
						}
					})
					input.value = _data[key] || '';
				}else if(attr[key].type === 'textarea'){
					div.style.width = '95%';
					div.style.height = 'auto';
					input = createElement('textarea',{
						placeholder:attr[key].title,
						style:{
							border:'none',
							padding:'5px',
							width:'95%',
							background:'none',
							height:'40px',
							opacity:0.5
						},
						onchange:function(){
							_data[key] = this.value;
						}
					})
					input.value = _data[key] || '';
				}else if(attr[key].type === 'actions'){
					div.style.width = '95%';
					div.style.height = 'auto';
					input = createElement('div',{
						innerHTML:'<div style="margin-left:10px;">' + attr[key].title + '</div>',
						style:{
							width:'95%'
						}
					});
					var checkboxActive = '';
					_data[key] = _data[key] || attr[key].value;
					(function(){
						input.innerHTML = '';
						var fn = arguments.callee;
						input.appendChild(createElement('div',{
							innerHTML:'选项',
							style:{
								marginLeft:'10px'
							}
						}));
						for(var i = 0; i < _data[key].length; i ++){
							(function(i){
								var tr = createElement('div',{
									style:{
										height:'30px',
										lineHeight:'30px',
										overflow:'hidden',
										borderTop:'1px solid #e4e4e4',
										marginLeft:'10px'
									}
								});
								tr.appendChild(createElement('input',{
									placeholder:'选项' + (i + 1),
									value:_data[key][i].name,
									style:{
										border:'none',
										width:'38%',
										float:'left',
										height:'30px'
									},
									onchange:function(){
										_data[key][i].name = this.value;
										if(_data[key][i].value == '') _data[key][i].value = this.value;
									}
								}))
								tr.appendChild(createElement('input',{
									placeholder:'值(value)',
									value:_data[key][i].value,
									style:{
										border:'none',
										width:'23%',
										float:'left',
										height:'30px',
										margin:'0px 1%'
									},
									onchange:function(){
										_data[key][i].value = this.value;
										if(_data[key][i].value == '') _data[key][i].value = _data[key][i].name;
									}
								}))
								var span = createElement('span',{
									innerHTML:'<label for="checkboxlabel' + i + '">默认选中</label>',
									style:{
										float:'left',
										display:'block',
										width:'37%',
										overflow:'hidden',
										textAlign:'right',
										fontSize:'0.8rem'
									}
								});
								var checkbox = createElement('input',{
									type:'radio',
									id:'checkboxlabel' + i,
									style:{
										marginLeft:'5px',
										marginRight:'15px'
									},
									onclick:function(){
										/*if(checkboxActive) {
											_data[key][checkboxActive.flog].selected = false;
											checkboxActive.element.checked = false;
										}
										if(!checkboxActive) checkboxActive = {};
										checkboxActive.flog = i;
										checkboxActive.element = this;
										_data[key][i].selected = this.checked;
										this.checked = true;*/
										_data[key][i].selected = this.checked;
									}
								})
								if(_data[key][i].selected) {
									//checkboxActive = {flog:i,element:checkbox};
									checkbox.checked = true;
								}
								span.appendChild(checkbox);
								span.appendChild(createElement('span',{
									innerHTML:'删',
									style:{
										color:'#d74a4a',
										textDecoration:'underline'
									},
									onclick:function(){
										if(confirm('确定删除此选项?')){
											if(_data[key][i].selected) {
												alert('必选项无法删除');
											}else{
												_data[key].splice(i,1);
												fn();
											}
										}
									}
								}))
								tr.appendChild(span);
								input.appendChild(tr);
							})(i)
						}
						input.appendChild(createElement('div',{
							innerHTML:'+ 添加选项',
							style:{
								color:'#d74a4a',
								fontSize:'0.8rem',
								textAlign:'left',
								borderTop:'1px solid #e4e4e4',
								marginLeft:'10px'
							},
							onclick:function(){
								_data[key].push({value:'',name:'',selected:false});
								fn();
							}
						}));
					})()
				}else if(typeof attr[key].type == 'object'){
					style('*:focus','outline:none;');
					input = createElement('input',{
						placeholder:attr[key].title,
						type:'text',
						style:{
							border:'none',
							height:'30px',
							lineHeight:'30px',
							padding:'0px 5px',
							width:'95%',
							background:'none'
						}
					})
					attr[key].type.i(input,_data[key]);
					_data[key] = attr[key].type.v;
				}else{
					style('*:focus','outline:none;');
					input = createElement('input',{
						placeholder:attr[key].title,
						type:attr[key].type,
						style:{
							border:'none',
							height:'30px',
							lineHeight:'30px',
							padding:'0px 5px',
							width:'95%',
							background:'none'
						},
						onchange:function(){
							_data[key] = this.value;
						}
					})
					input.value = _data[key] || '';
				}
				div.appendChild(input);
				content1.appendChild(div);
			})(key)
		}
		for(var key in verifyMethods){
			(function(key){
				var div = createElement('div',{
					className:'div' + id
				})
				var input = '';
				if(verifyMethods[key].type == 'checkbox'){
					div.innerHTML = '<label for="check' + key + id + '" style="float:left;font-size:0.8rem;margin-left:5px;">' + verifyMethods[key].title + '</label>';
					input = createElement('input',{
						type:'checkbox',
						id:'check' + key + id,
						style:{
							float:'right',
							marginRight:'10%',
							marginTop:'8px'
						},
						onchange:function(){
							rule[key] = this.checked;
						}
					})
					input.checked = !!rule[key];
				}else if(verifyMethods[key].type == 'textarea'){
					div.style.width = '95%';
					div.style.height = 'auto';
					input = createElement('textarea',{
						placeholder:verifyMethods[key].title,
						style:{
							border:'none',
							padding:'5px',
							width:'95%',
							background:'none',
							height:'40px',
							opacity:0.5
						},
						onchange:function(){
							rule[key] = this.value;
						}
					})
					input.value = rule[key] || '';
				}else{
					input = createElement('input',{
						placeholder:verifyMethods[key].title,
						style:{
							border:'none',
							height:'30px',
							lineHeight:'30px',
							padding:'0px 5px',
							width:'95%',
							background:'none'
						},
						attr:{
							type:verifyMethods[key].type
						},
						onchange:function(){
							rule[key] = this.value;
						}
					})
					input.value = rule[key] || '';
				}
				div.appendChild(input);
				content2.appendChild(div);
			})(key)
		}

		function content(n,tab1,tab2,content1,content2){
			tab1.style.background = '#06a052';
			tab1.style.color = '#fff';
			content1.style.display = 'block';
			tab2.style.background = 'none';
			tab2.style.color = '#06a052';
			content2.style.display = 'none';
		}
		content1.appendChild(createElement('div',{style:{clear:'both'}}));
		content2.appendChild(createElement('div',{style:{clear:'both'}}));
		background.appendChild(content1);
		background.appendChild(content2);
		content(0,tab1,tab2,content1,content2);
		dom.appendChild(background);
		active.edit = background;
	}
	function remove(data){
		var result = confirm('是否删除！');
		if(result && data.type == 'container') result = confirm('删除表单会同时删除表单下的内容,是否继续删除?');
	    if(result){
	    	deleteFn();
	    }
	    function deleteFn(){
	    	var id = data.id;
			var _data = [];
			for(var i = 0; i < fromData.components.length; i ++) if(fromData.components[i].id != id && fromData.components[i].parentId != id) _data.push(fromData.components[i]);
			fromData.components = _data;
	        build();
	        out();
	    }
	}
	function move(data,forword){
		var parentId = data.parentId;
		var isFinded = false,prev = null,now = null,next = null;
		for(var i = 0; i < fromData.components.length; i ++){
			if(fromData.components[i].parentId == parentId){
				if(fromData.components[i].id == data.id) {
					now = i;
					isFinded = true;
				}else{
					if(!isFinded) {
						now = i;
						prev = i;
					}else{
						if(!next){
							next = i;
						}else{
							break;
						}
					}
				}
			}
		}
		var index = fromData.components[now].index;
		if(forword > 0 && fromData.components[next]){
			fromData.components[now].index = fromData.components[next].index;
			fromData.components[next].index = index;
		}else if(forword < 0 && fromData.components[prev]){
			fromData.components[now].index = fromData.components[prev].index;
			fromData.components[prev].index = index;
		}
		fromData.components.sort(function(a,b){
			return a.index - b.index;
		})
		build(true);
	}
	function style(selectString,styleString){
		var str = selectString + '{' + styleString + '}';
		if(styleElement.innerHTML.indexOf(str) == -1) styleElement.innerHTML = styleElement.innerHTML + str;
	}
	function select(parentId){
		if(active.btns) active.btns.style.display = 'none';
		var _styles = {
			position:'fixed',
			zIndex:zIndex(),
			bottom:'0px',
			left:'0px',
			background:'#fff',
			minHeight:'200px',
			width:'100%',
			boxShadow:'0 0 10px #ccc',
			textAlign:'left'
		}
		equal(_styles,styles);
		var background = createElement('div',{
			style:_styles
		})
		var titleDiv = createElement('div',{
			style:{
				textAlign:'right',
				height:'40px',
				background:'#f8f8f8',
				borderTop:'1px solid #e4e4e4',
				borderBottom:'1px solid #e4e4e4',
				color:'#08974e',
				lineHeight:'40px',
				padding:'0px 10px'
			}
		})
		titleDiv.appendChild(createElement('span',{
			innerHTML:'新增控件',
			style:{
				float:'left',
				fontSize:'1.2rem'
			}
		}))
		titleDiv.appendChild(createElement('span',{
			innerHTML:'取消',
			style:{
				marginRight:'10px'
			},
			onclick:function(){
				if(active.select) active.select.style.display = 'none';
			}
		}))
		background.appendChild(titleDiv);
		var contentDiv = createElement('div',{
			style:{
				maxHeight:document.body.clientHeight + 'px',
				margin:'10px 5px',
				textAlign:'left'
			}
		})
		for(var key in componentConfig){
			if(key == 'container') continue;
			if(componentConfig[key].componentClassify) {
				contentDiv.appendChild(createElement('div',{
					innerHTML:componentConfig[key].name,
					style:{
						margin:'10px 5px',
						borderBottom:'1px solid #e4e4e4',
						lineHeight:'30px'
					}
				}));
				continue;
			}
			(function(key){
				var span = createElement('span',{
					style:{
						display:'inline-block',
						margin:'5px',
						border:'1px solid #e4e4e4',
						padding:'0px 10px',
						color:'#7d7c7c'
					},
					innerHTML:componentConfig[key].name,
					onclick:function(){
						componentConfig[key].type = key;
						edit(componentConfig[key],parentId);
					}
				})
				contentDiv.appendChild(span);
			})(key)
		}
		background.appendChild(contentDiv);
		dom.appendChild(background);
		active.select = background;
	}
	function editFrom(){
		if(status.readonly) return false;
		var container = clone(componentConfig.container);
		container.id = new Date().only();
		container.type = 'container';
		container.parentId = 0;
		for(var key in container.attr) container.attr[key] = container.attr[key].defaultValue || '';
		container.label = container.name;
		container.attr.label = container.name;
		delete container.template;
		fromData.components.push(container);
		build();
	}
	function build(noSort){
		out();
		if(componentConfig) dom.innerHTML = '';
		var doms = {};
		if(!noSort){
			fromData.components.sort(function(a,b){
				var rc = a.parentId - b.parentId;
				if(rc == 0) rc = a.id - b.id;
				return rc;
			})
		}
		for(var i = 0; i < fromData.components.length; i ++){
			(function(i){
				var c = fromData.components[i],config = componentConfig[c.type];
				var cAttr = clone(c.attr);
				cAttr.id = c.id;
				//cAttr.label = c.label || cAttr.label;
				c.index = i;
				if(config){
					var element = createElement('div',{
						innerHTML:_eval(_eval(config.template,cAttr,config.templateEval,config.templateEvalFinal),c,config.templateEval,config.templateEvalFinal)
					})
					if(status.edit) {
						element.addEventListener('click',function(e){
							selectComponent.call(this,c,e);
						},true)
					}
					if(c.type == 'container'){
						dom.appendChild(element);
						doms['_' + c.id] = document.getElementById('container' + c.id);
					}else{
						if(doms['_' + c.parentId]){
							doms['_' + c.parentId].appendChild(element);
						}else{
							dom.appendChild(element);
						}
					}
					if(config.setVal) config.setVal(c);
				}
			})(i)
		}
		if(componentConfig) {
			for(var key in doms){
				(function(key){
					doms[key].appendChild(createElement('div',{
						innerHTML:htmls.addComponent || '<div style="padding:10px;background:#e4e4e4;border:1px dashed #e4e4e4;color:#000;">+ 添加控件</div>',
						style:{
							padding:'10px',
							textAlign:'center',
							color:'#ccc',
							width:'50%',
							margin:'0px auto'
						},
						onclick:function(){
							out();
							select(key.replace('_',''));
						}
					}));
				})(key)
			}
			dom.appendChild(createElement('div',{
				innerHTML:htmls.addFrom || '<div style="padding:10px;border:1px dashed #e4e4e4;background:#fff;">添加表单</div>',
				style:{
					padding:'0px 10px 10px 10px',
					textAlign:'center',
					color:'#ccc'
				},
				onclick:function(){
					out();
					editFrom();
				}
			}));
		}
	}
	win.CSShelper = function(args){
		args = args || {};
		dom = args.dom || document.body;
		componentConfig = args.componentConfig;
		if(!componentConfig) {
			document.body.appendChild(createElement('link',{
				attr:{
					rel:'stylesheet',
					href:'https://daneden.github.io/animate.css/animate.min.css'
				}
			}))
			editCss();
			return false;
		}
		if(args.animates instanceof Array) animates = animates.concat(args.animates);
		fromData = args.fromData || fromData;
		equal(status,args.status);
		htmls = args.htmls || {};
		Verify = args.Verify || {};
		styles = args.styles || {};
		id = new Date().only();
		verifyMethods = args.verifyMethods || {};
		if(args.build){
			args.build();
		}else{
			build();
		}
		styleElement = createElement('style');
		styleElement.type = 'text/css';
		document.getElementsByTagName("head")[0].appendChild(styleElement);
		return fromData;
	}
})(window)